<template>
  <div class="secret-dialog">
    <el-dialog
      title="密钥对列表"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :show-close="true"
      width="800px"
      center
      @close="handleClose"
    >
      <div class="content userinfo-content">
        <el-table ref="myTable" stripe :data="tableData" style="width: 100%" size="small">
          <!--<el-table-column type="index" label="编号" :index="table_index"></el-table-column>-->
          <!--<el-table-column prop="userId" label="用户ID" min-width="90"/>-->
          <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"/>
          <el-table-column prop="accessKey" label="Access Key" show-overflow-tooltip/>
          <el-table-column prop="secretKey" label="Secret Key" show-overflow-tooltip/>
          <el-table-column prop="enable" label="状态" min-width="50">
            <template #default="{ row }">
              <el-tag :type="row.enable | enableFilter">{{ row.enable | enableFil}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="text-align: center;margin-top: 20px;">
          <el-button type="primary" :loading="submitLoading" icon="el-icon-circle-plus-outline" v-show="total<3" :total="total"
                     @click="submitForm()">创 建
          </el-button>
          <el-button icon="el-icon-close" @click="handleClose">取 消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {Message} from "element-ui";
  import {formatDate} from "@/utils/utils";
  import {getUserAccessKeyList, generateAccessKey} from "@/api/user";

  export default {
    name: "secretKey",
    components: {},
    props: {
      showDialog: false
    },
    data() {
      return {
        total: 0,
        tableData: [],
        submitLoading: false
      };
    },
    filters: {
      enableFil(val) {
        switch (val) {
          case 1:
            return "启用";
          case 0:
            return "禁用";
          default:
            break;
        }
      },
      enableFilter(state) {
        const stateMap = {
          1: "success",
          0: "danger"
        };
        return stateMap[state];
      }
    },
    computed: {
      dialog: function () {
        return this.showDialog;
      }
    },
    watch: {
      dialog(newVal, oldVal) {
        if (newVal) {
          //this.getMessage()
        }
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      // 取消事件
      handleClose() {
        this.$emit("secretKeyDialogFun", false);
      },
      dateFormat(row, column) {
        if (column.property === "createTime") {
          return formatDate(new Date(row.createTime));
        } else if (column.property === "updateTime") {
          return formatDate(new Date(row.updateTime));
        }
      },
      getList() {
        getUserAccessKeyList().then(res => {
          this.tableData = res.value;
          this.total = res.value.length;
        });
      },
      submitForm() {
        generateAccessKey().then(res => {
          if (res.code == "200") {
            Message.success("创建成功");
            this.getList();
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .edit-pwd {
    padding-top: 80px;

    .form {
      width: 500px;
      margin: auto;

      .title {
        display: block;
        font-size: 16px;
        // font-weight: bold;
        line-height: 30px;
        color: #212121;
      }

      .phone-num {
        width: 100%;
        text-align: left;
      }

      .code {
        width: 100%;
        display: flex;
      }

      .btn {
        margin: 0 20px;
      }
    }
  }
</style>
